<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Waterfall from '@/components/common/Waterfall.vue'
import { recommTravel, userTravels } from '@/apis/apis.js'

const categoryNavList = ref([])
const recommTravelList = ref([])
const userTravelsList = ref([])
const activeIndex = ref(0)
const page = ref(1)
const loading = ref(false)
const finished = ref(false)
const router = useRouter()

const getRecommTravel = async () => {
  const res = await recommTravel()
  categoryNavList.value = res.data.category_nav
  recommTravelList.value = res.data.recomm_travel
}

const getUserTravels = async () => {
  const res = await userTravels({ page: page.value })
  if (res.data.length <= 0) {
    finished.value = true
  }
  userTravelsList.value = [...userTravelsList.value, ...res.data]
}

const handleClickInput = () => {
  router.push('/search-travel')
}

const onLoad = async () => {
  page.value++
  await getUserTravels()
  loading.value = false
}

onMounted(async () => {
  await getRecommTravel()
  await getUserTravels()
})
</script>

<template>
  <van-search readonly shape="round" placeholder="搜索地点/景点/游记" @click-input="handleClickInput" />
  <van-grid :border="false" :column-num="5">
    <van-grid-item :icon="item.icon" :text="item.text" v-for="item in categoryNavList" :key="item._id" />
  </van-grid>
  <div class="recommend" v-if="recommTravelList.length > 0">
    <div class="recommend-header">推荐</div>
    <div class="recommend-body">
      <div class="body-left" @click="$router.push(`/details-page?article_id=${recommTravelList[activeIndex]._id}`)">
        <van-image fit="cover" :src="recommTravelList[activeIndex].cover_image.url" />
        <div class="left-info">
          <van-text-ellipsis :content="recommTravelList[activeIndex].title" />
          <div class="info-user">
            <van-image class="user-avatar" fit="cover" round
              :src="recommTravelList[activeIndex].author_data[0].avatarUrl" />
            <div>
              <div class="user-name nowrap-ellipsis">{{ recommTravelList[activeIndex].author_data[0].nickname }}</div>
              <div class="user-position nowrap-ellipsis">我在 {{ recommTravelList[activeIndex].address }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="body-right">
        <van-image fit="cover" :src="item.cover_image.url" :class="{ active: index === activeIndex }"
          v-for="(item, index) in recommTravelList" :key="item._id" @click="activeIndex = index" />
      </div>
    </div>
  </div>
  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
    :immediate-check="false">
    <Waterfall :userTravelsList="userTravelsList" />
  </van-list>
</template>

<style scoped lang="scss">
.van-search {
  --van-search-background: var(--van-gray-1);
  --van-search-content-background: white;
}

.van-grid {
  --van-grid-item-content-background: var(--van-gray-1);
}

.recommend {
  padding: 10px;

  .recommend-header {
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
  }

  .recommend-body {
    display: flex;
    height: 200px;
    border-radius: 5px;
    overflow: hidden;

    .body-left {
      position: relative;
      flex: 4;

      .van-image {
        width: 100%;
        height: 100%;
      }

      .left-info {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 10px;

        .van-text-ellipsis {
          margin-bottom: 8px;
          color: white;
          font-weight: bold;
          font-size: 16px;
        }

        .info-user {
          display: flex;
          align-items: center;
          color: white;
          font-size: 12px;

          .user-avatar {
            margin-right: 5px;
            width: 30px;
            height: 30px;
          }

          .user-name,
          .user-position {
            width: 225px;
          }
        }
      }
    }

    .body-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      padding: 5px 2px;
      background-color: #7c8cb9;

      .van-image {
        width: 90%;
        height: 43px;

        &.active {
          border: 2.5px solid yellow;
        }
      }
    }
  }
}
</style>
